<template>
  <div>
    <ul
      class="contextmenu"
      id="menu"
      :style="{ left: thisx + 'px', top: thisy + 'px' }"
    >
      <li
        @click="hdClick(index)"
        v-for="(item, index) in tmenu"
        :key="index"
        v-show="isshowli(index)"
      >
        <i :class="item.icon"></i>                                   
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tmenu: [
        {
          icon: 'el-icon-refresh-right',
          text: '刷新页面',
          id: 1,
        },
        {
          icon: 'el-icon-close',
          text: '关闭当前',
          id: 2,
        },
        {
          icon: 'el-icon-circle-close',
          text: '关闭其他',
          id: 3,
        },
        {
          icon: 'el-icon-back',
          text: '关闭左侧',
          id: 4,
        },
        {
          icon: 'el-icon-right',
          text: '关闭右侧',
          id: 5,
        },
        {
          icon: 'el-icon-circle-close',
          text: '全部关闭',
          id: 6,
        },
      ],
    }
  },
  props: ['thisx', 'thisy', 'index', 'tags'],
  methods: {
    hdClick(i) {
     this.$emit("fn",i)
    },
    isshowli(i) {
      if (this.tags.length == 1) {
        return i == 0;
      }
      if (this.index == 0) {
        return ![1, 3].includes(i)
      }
      if (this.index == 1 && this.index == this.tags.length - 1) {
        return ![3, 4].includes(i)
      } else if (this.index == 1 && this.index !== this.tags.length - 1) {
        return ![3].includes(i)
      }
      if (this.index == this.tags.length - 1) {
        return ![4].includes(i)
      }
      return true
    },
  },
}
</script>

<style lang="less" scoped>
.contextmenu {
  margin: 0;
  padding: 5px 0;
  background: #fff;
  position: absolute;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 30%);
  li {
    list-style: none;
    line-height: 25px;
    font-size: 14px;
    color: #333;
    padding: 0 10px;
    cursor: pointer;
    i {
      color: #444;
      margin-right: 1px;
      font-size: 14px;
    }
  }
  li:hover {
    background: #ddd;
  }
}
</style>
